<template>
  <el-card class="box-card border-radius" :shadow="props.shadow" :body-style="bodyStyle" :style="{ '--padding': props.padding, '--margin': props.margin }">
    <template v-if="props.isHeader" #header>
      <div class="card-header fs-14">
        <span>
          <slot name="title">{{props.title}}</slot>
        </span>
        <slot name="icon"></slot>
      </div>
    </template>
    <slot />
  </el-card>
</template>

<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    default: "Card name"
  },
  isHeader: {
    type: Boolean,
    default: true
  },
  padding: {
    type: String,
    default: "10px"
  },
  margin: {
    type: String,
    default: "0"
  },
  shadow: {
    type: String,
    default: "always"
  }
});
const bodyStyle = {
  padding: props.padding
}
</script>

<style scoped lang="scss">
.box-card {
  margin: var(--margin);
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
::v-deep(.el-card__header) {
  padding: var(--padding);
}
</style>